<template>
    <div class="tag-input">
        <span class="tag" v-for="(item,index) in datalist" :key="index">{{ item }}<i @click="remove(index)">x</i></span>
        <input v-if="datalist.length < this.maxCount" type="text" :maxlength="maxLength" :placeholder="placeholder" v-model="textvalue" @keypress.enter="addText" />
    </div>
</template>
<script>
export default {
    name: "tagInput",
    props: {
        value: {
            type: String,
            default: "",
        },
        maxCount: {
            type: [String,Number],
            default: 100,
        },
        maxLength: {
            type: Number,
            default: 20,
        },
        placeholder:{
            type:String,
            require:false
        }
    },
    data() {
        return {
            textvalue: "",
        };
    },
    computed: {
        datalist() {
            return this.value ? this.value.split(",") : [];
        },
    },
    mounted() {},
    methods: {
        addText() {
            console.log("aaa");
            if (this.textvalue) {
                if (this.datalist.indexOf(this.textvalue) === -1) {
                    this.datalist.push(this.textvalue);
                    this.$emit("update:value", this.datalist.join(","));
                    this.textvalue = "";
                }
            }
        },
        remove(i){
            this.datalist.splice(i,1);
            this.$emit("update:value", this.datalist.join(","));
        }
    },
};
</script>
<style scoped lang="less">
.tag-input{
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    display: flex;
    align-items: center;
    height: 32px;
    span.tag{
        display: inline-block;
        margin:0 2px;
        background-color: #eee;
        color: #333;
        padding:0 4px;
        i{
            content:"×";
            margin-left: 4px;
            font-size: 16px;
            font-style: normal;
            cursor: pointer;
            &:hover{
                color:#4687FF;
            }
        }
    }
    input{
        flex-grow: 1;
        height: 100%;
        border:none;
        outline: none;
    }
}
</style>
